<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>地图标注</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
        <style>body,div{margin:0;padding:0;font-size:100%;}a.map_sub{text-decoration:none;color:blue}a.map_sub:hover{color:#e40000}</style>
    </head>
    <body>
        <div style="width:1000px;height:450px;" id="mapbar"></div>
    </body>
</html>
<script type="text/javascript">
    var ifm = parent.$('#rightMain')[0].contentWindow;
    var clickable = false; //提交按钮状态
    var position; //用于记录用户选定位置
    var positionSelected = new BMap.Point(); //传递选择的点
    var map = new BMap.Map("mapbar"); //初始化地图
    if( ifm.$('#map').val() == '' ) {
        var compmap = '120.762085,30.752786'.split(',');
        var map_lng = Number(compmap[0]);
        var map_lat = Number(compmap[1]);
        var pointBase = new BMap.Point( map_lng,map_lat );
        map.centerAndZoom(pointBase, 12);
    } else {
        var compmap = ifm.$('#map').val().split(',');
        var map_lng = Number(compmap[0]);
        var map_lat = Number(compmap[1]);
        var pointBase = new BMap.Point( map_lng,map_lat );
        map.centerAndZoom(pointBase, 16);
    }
           
    //加载地图
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom();
            
    // 编写自定义函数,创建标注
    var myIcon = new BMap.Icon("__PUBLIC__/Admin/Images/marker.png", new BMap.Size(26, 37));
    var marker = new BMap.Marker(pointBase, {
        enableMassClear: false,
        icon: myIcon
    });
    var label = new BMap.Label("", {offset: new BMap.Size(30, -5)});
    label.setStyle({border:"none"});
    label.addEventListener("click", mapsubmit);
    marker.setLabel(label);
    marker.enableDragging(true);
    map.addOverlay(marker);
    var styles = {border:"none", paddingTop:"2px", background:"url(__PUBLIC__/Admin/Images/btn_map.gif) no-repeat", width:"84px", height:"26px", textAlign:"center", position:"absolute"};

    //点击事件
    map.addEventListener("click", function (e) {
        if (!(e.overlay)) {
            map.clearOverlays();
            marker.show();
            marker.setPosition(e.point);
            setResult(e.point.lng, e.point.lat);
            positionSelected = e.point;
            var label = marker.getLabel();
            label.setContent("<a href='#' class='map_sub'>提交此地点</a>");
            label.setStyle(styles);
            clickable = true;
        }
    });

    //拖拽中事件
    marker.addEventListener("dragging", function () {
        var label = marker.getLabel();
        label.setContent("");
        label.setStyle({border:"none", background:"none"});
        clickable = false;
    });

    //拖拽事件
    marker.addEventListener("dragend", function (e) {
        setResult(e.point.lng, e.point.lat);
        positionSelected = e.point;
        var label = marker.getLabel();
        label.setContent("<a href='#' class='map_sub'>提交此地点</a>");
        label.setStyle(styles);
        clickable = true;
    });

    function setResult(lng, lat) {
        position = lng + ", " + lat;
    }

    function mapsubmit() {
        if (clickable) {
            var p = marker.point;
            ifm.$('#map').val(p.lng+","+p.lat);
            ifm.$('#map_add').hide();
            ifm.$('#map_edit').show();
            window.top.art.dialog({id:'pageDialog'}).close();
        }
    }
</script>